    <template>
        <div class="page">
            <div class="img" >
                
            </div>
            <div class="login">
    <a-card  :bordered="false" style="width: 350px;height: 300px;" class="box-card">
        <a-tabs v-model:activeKey="activeKey" centered>
        <a-tab-pane key="1" tab="登录" >
            
                    <a-form
                :model="formState"
                ref="loginFormRef"
                name="loginform"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
                @keyup.enter="btnlogin(formState)"
            >
                <a-form-item
                label="用户名"
                name="username"
                :rules="[
                    { required: true, message: '请输入用户名!' },
                    { min:4 , max:10 , message:'长度需在4~10位字符之间' }//trigger:触发时机 其值change：当表单控件的值发生变化时出发校验 ； blur:当表单控件失去焦点时出发校验
                    ]"
                >
                <a-input v-model:value="formState.username" />
                </a-form-item>

                <a-form-item
                label="密码"
                name="password"
                :rules="[
                    { required: true, message: '请输入密码!' },
                    {min:5 , max:12 , message:'长度需在5~12位字符之间' }
                    ]"
                >
                <a-input-password v-model:value="formState.password" />
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" @click="btnlogin(formState)">登录</a-button>
                </a-form-item>
            </a-form>
    </a-tab-pane>
    
    <a-tab-pane key="2" tab="注册" force-render  ref="registryFormRef">
        <a-form
                :model="registryState"
                ref="Registryform"
                name="registryform"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
            
                
            >
                <a-form-item
                label="用户名"
                name="username"
                :rules="[
                    { required: true, message: '请输入用户名!' },
                    { min:4 , max:10 , message:'长度需在4~10位字符之间' }
                    ]"
                >
                <a-input v-model:value="registryState.username" />
                </a-form-item>

                <a-form-item
                label="密码"
                name="password"
                :rules="[
                     { required: true, message: '请输入密码!' },
                     {min:6 , max:12 , message:'长度需在6~12位字符之间' }
                    ]"
                >
                <a-input-password v-model:value="registryState.password" />
                </a-form-item>
                <a-form-item
                label="确认密码"
                name="ConfirmPassword"
                :rules="[ 
                    { required: true, message: '请输入密码!' },
                    {min:6 , max:12 , message:'长度需在6~12位字符之间' }
                ]"
                >
                <a-input-password v-model:value="registryState.ConfirmPassword" />
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" @click="btnregistry(registryState)" >注册</a-button>
                </a-form-item>
            </a-form>
    </a-tab-pane>
  </a-tabs>
    </a-card>
  </div>
        </div>

    </template>
    
    <script setup>
        import { ref,reactive } from 'vue';
        import axios from 'axios';
        import { useUserStore } from '../store';
        import { useRouter } from 'vue-router';
        import { message } from 'ant-design-vue';

        import request from '../store/request';
        

        const activeKey = ref('1');
        const loginFormRef = ref(null);
        const router = useRouter();
       
       const useStore = useUserStore();
        const onFinish = values => {
        console.log('Success:', values);
        };
        const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
        };

        //登录功能
            //登录表单的状态，包含用户凭据。
            const formState = reactive({
            username: '',
            password: ''
            });
        
        //处理登录按钮点击事件
         async function btnlogin(formState){
            try {
            // 手动触发表单校验，确保所有表单项都符合规则之后才执行登录操作
            await loginFormRef.value.validate();
            //向服务器发起post请求
            const response = await request.post('http://localhost:5133/api/Login',formState)
            // 将从响应中获取的令牌和用户名设置到useStore和本地存储中。
            useStore.user.token = response.data.data.token;
            useStore.user.username = response.data.data.userName
            // 在本地存储中保存令牌和用户名，以便跨会话持久化。
            localStorage.setItem("token",useStore.user.token)
            localStorage["username"] = useStore.user.username;
            
            router.push('/Index');

            
        } 
        catch (error) {
            console.log(error)
             // 捕获异常，显示登录失败弹窗
            message.error('登陆失败，请重试')
        }
        }
    //注册功能
    //注册表单的状态，包含用户凭据。
        const registryState = reactive({
        username: '',
        password: '',
        ConfirmPassword:''
        })

        const Registryform = ref(null);
        //处理注册按钮点击事件
        async function btnregistry(registryState){

            try {
            // 手动触发表单校验，确保所有表单项都符合规则之后才执行登录操作
            await Registryform.value.validate();
            // console.log(registryState);
            if(registryState.password !== registryState.ConfirmPassword){
                message.warn('两次密码输入不一致，请重置');
                registryState.username = '';
                registryState.password = '';
                registryState.ConfirmPassword = '';
            }else{
                const response = await request.post('http://localhost:5133/api/Register',registryState);
                //注册成功后自动登录至index界面
                if(response.data.isSuccess == true){
                    // 将注册的用户名和密码设置到登录表单中
                    formState.password = registryState.password;
                    formState.username = registryState.username;
                    // 执行登录操作
                    await btnlogin(formState);
                }

            }
            
        } 
        catch (error) {
            message.error('注册失败，请重试')
            console.log(error);
        }
        }


    </script>
    
    <style>
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;  
      }
    .img{
        
        width: 450px;
        height: 300px;
        background-image: url('../../img/D0EK_bZf25baUkCMtJoY.png');
        background-repeat: no-repeat;
        background-size: cover;
      

    }
   .page{
        
         width: 800px;
         height: 300px;
         display: flex;    
           position: absolute; 
        right: 10%; 
        top: 50%;
        transform: translate(0, -50%); 
        }

    </style>